import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import CSSModules from 'react-css-modules';
import {
  List,
  Card,
  Row,
  Col,
  Button,
  Menu,
  Icon,
  Dropdown,
  Tag,
  Avatar,
  Popconfirm,
} from 'antd';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';

import styles from './index.less';

const {Description} = DescriptionList;
const ButtonGroup = Button.Group,
  titleMaxLength = 30;

class ArticleItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {}
  handleCheckData = () => {
    const {onCheckData} = this.props;
    onCheckData && onCheckData();
  };
  handleEdit = () => {
    const {onEdit} = this.props;
    onEdit && onEdit();
  };
  handleDelete = () => {
    const {onDelete, articleId} = this.props;
    onDelete && onDelete(articleId);
  };
  handleOnline = () => {
    const {onOnline} = this.props;
    onOnline && onOnline();
  };
  render() {
    const {
      articleId,
      view,
      commentCount,
      href,
      articleTitle,
      categoryName,
      type,
    } = this.props;

    const IconText = ({type, text}) => (
      <span>
        <Icon type={type} style={{marginRight: 8}} />
        {text}
      </span>
    );

    const ListExtraButtons = ({data: {articleId}}) => {
      return (
        <div className={styles.listItemExtra}>
          <ButtonGroup>
            <Button
              size="large"
              disabled={type == 1 ? false : true}
              onClick={this.handleEdit}>
              <Link to={`/article/edit/${articleId}`}>编辑</Link>
            </Button>
            <Popconfirm
              title="确认删除文章?"
              okText="确认"
              cancelText="取消"
              onConfirm={this.handleDelete}>
              <Button type="danger" size="large">
                删除
              </Button>
            </Popconfirm>
          </ButtonGroup>
          <p />
          <ButtonGroup />
        </div>
      );
    };

    const ListContent = ({data: {createTime, authorName}}) => (
      <div className={styles.listContent}>
        <div className={styles.extra}>
          {authorName}&nbsp;发布在<em>{createTime}</em>
        </div>
      </div>
    );

    return (
      <List.Item
        key={articleId}
        actions={[<Link to={`/article/comment/${articleId}`}><IconText type="message" text={commentCount || 0} /></Link>]}
        extra={<ListExtraButtons data={this.props} />}>
        <List.Item.Meta
          title={
            <a className={styles.listItemMetaTitle}>
              {articleTitle.length > titleMaxLength
                ? `${articleTitle.substr(0, titleMaxLength)}...`
                : articleTitle}
            </a>
          }
          description={
            <span>
              <Tag>{categoryName}</Tag>
            </span>
          }
        />
        <ListContent data={this.props} />
      </List.Item>
    );
  }
}

export default CSSModules(ArticleItem, styles);
